{literal}
    <style type="text/css">
		@import url('../static/admin/css/shippingtime.css');
		
		.action .btn24{
			margin-left: 4px;
			margin-right: 4px;
			float:left;
		}		
		textarea{
			width: 100%;
		}
    </style>
{/literal}

{include file = "styles/header.tpl"}
<div id="content" class="box">
    <h1>Order Status</h1>
    <form method="post" id="frmRules" name="frmRules" action="{$smarty.const.HOST_ADMIN}/shippingtime/importrule" enctype="multipart/form-data">
		<fieldset>
			<div >				
				<a id='create_status' class="btn" href="#">Create Status</a>				
			</div>	
		</fieldset>
		<div style="clear:both"></div>		
	</form>
    <table id="display_status_list" width="100%">
        <thead>
			<tr>            
				<th style="width:10px">Id</th>
				<th style="width:300px">Display Status</th>
				<th style="width:200px">Oms Status</th>
				<th style="width:5px" >Notify</th>
				<th>Email template</th>
				<th class="last">Action</th>
			</tr>
		</thead>
		<tbody>
		<tr style="display:none" id="first_row">
		<tr>
        {foreach  from=$orderstatus key=id_status_display item=status}			
            <tr class="status_data">                
				<td class="status_id" style="width:10px">
                    <span style="display:none">
                        <input type="text" id="input_status_id" class="status_id" name="status_id" value="{$id_status_display}" >
                    </span>
                    <span id="span_status_id">{$id_status_display}</span>
                </td>                
                <td class="status_text">
                    <span class="for_editing">
                        <input type="text" name="status_text" value="{$status.text}"></input>
                    </span>
                    <span class="for_view">{$status.text}</span>
                </td>
                
                <td class="oms_status">
                    <span class="for_editing">
                        <input name="oms_status" value="{$status.order_item_status_string}"></input>
                    </span>
                    <span class="for_view">
                        {$status.order_item_status_string}
                    </span>					
                </td> 
				<td class="oms_notify" align="center">                    
					 {if $status.enable_notification eq 1}
                        {assign var=checked value="checked"}
                    {else}
                        {assign var=checked value=""}
                    {/if}
                    <span >
                         <input disabled class="oms_notify" type="checkbox" name="oms_notify" value="oms_notify" {$checked}/>
                    </span>					
                </td> 
				
				<td class="oms_email_template">
                    <span class="for_editing">
                        <textarea name="oms_email_template">{$status.mail_template}</textarea>
                    </span>
                    <span class="for_view">
                        {$status.mail_template}</code>
                    </span>					
                </td> 
				
                <td class="action" style="width:100px" align=center>
                    <a title="edit" class="btn24 edit" href="#"><span></span></a>
                    <a title="cancel" class="btn24 reset" href="#"><span></span></a>
                    <a title="save" class="btn24 save disabled" href="#"><span></span></a>
                    <!--<button class="btn reset"><span class=""></span></button>-->
                    <!--<button class="btn save disabled"><span class=""></span></button>-->
                    <!--<button title="insert before" class="btn add"><span class=""></span></button>                    -->
                    <a title="delete" class="btn24 delete"><span class=""></span></a>                    
                </td>
            </tr>
        {/foreach}
	</tbody>
    </table>
</div>
<table id="display_status_tpl" style="display:none">
	<tr class="status_data">                
		<td class="status_id" style="width:10px">
			<span style="display:none">
				<input id="input_status_id" type="text" class="status_id" name="status_id" value="" >
			</span>
			<span id="span_status_id"></span>
		</td>                
		<td class="status_text">
			<span class="for_editing">
				<input type="text" name="status_text" value="" >
			</span>
			<span class="for_view"></span>
		</td>
		
		<td class="oms_status">
			<span class="for_editing">
				<input name="oms_status" value=""></input>
			</span>
			<span class="for_view">
				
			</span>					
		</td>
		<td class="oms_notify" align="center"> 
			<span >
				 <input class="oms_notify" disabled type="checkbox" name="oms_notify"></input>
			</span>					
		</td> 
				
		<td class="oms_email_template">
			<span class="for_editing">
				<textarea type="checkbox" name="oms_email_template"></textarea>
			</span>
			<span class="for_view">				
			</span>					
		</td> 
		<td class="action" style="width:100px" align=center>
			<a title="edit" class="btn24 edit" href="#"><span></span></a>
			<a title="cancel" class="btn24 reset" href="#"><span></span></a>
			<a title="save" class="btn24 save disabled" href="#"><span></span></a>
			<!--<button class="btn reset"><span class=""></span></button>-->
			<!--<button class="btn save disabled"><span class=""></span></button>-->
			<!--<button title="insert before" class="btn add"><span class=""></span></button>                    -->
			<a title="delete" class="btn24 delete"><span class=""></span></a>                    
		</td>
	</tr>
</table>
<script type="text/javascript">
    var base_url = "{$smarty.const.HOST_ADMIN}";
    {literal}
	$(function(){
		$('.for_editing').hide();
		$('.reset').hide();

		/**************************************************************/
		$("#create_status").click(function(){
			createDisplayStatus();
			return false;
		});
		
		$('#display_status_list').delegate('td.action .edit', 'click', function(){
			var tr_tag = $(this).parent().parent();
			//$(this).hide();
			//$(this).next().show(
			tr_tag.find('.delete').addClass('disabled');
			enableEditing(tr_tag);
			return false;
		});
		
		$('#display_status_list').delegate('td.action .reset', 'click', function(){
			var tr_tag = $(this).parent().parent();
			//$(this).hide();
			//$(this).prev().show();
			disableEditing(tr_tag);
			tr_tag.find('.delete').removeClass('disabled');

			return false;
		});
		
		$('#display_status_list').delegate('td.action .save', 'click', function(){		
			if($(this).hasClass('disabled'))
				return false;
			var tr_tag = $(this).parent().parent();
			//$(this).prev('.reset').hide();			
			disableEditing(tr_tag);
			
			var status_tr_tag = $(this).parent().parent();
			status_tr_tag.find('.delete').removeClass('disabled');
			
			saveStatus(status_tr_tag);
			return false;
		});
		
		$('#display_status_list').delegate('td.action .delete', 'click', function(){
			if($(this).hasClass('disabled') == true)
				return false;
			
			if(confirm('Do you want to delete this display status?') == false)
				return false;
			
			var action_td_tag = $(this).parent();
			var status_tr_tag = $(this).parent().parent();			
			
			status_tr_tag.find('.delete').addClass('disabled');
			deleteStatus(status_tr_tag);
			
			return false;
		});
		
		function enableEditing(tr_tag)
		{
			tr_tag.find('.for_editing').show();
			tr_tag.find('.for_view').hide();
			if(tr_tag)
			{
				tr_tag.find('.reset').show();
				tr_tag.find('.edit').hide();
				tr_tag.find('.save').removeClass('disabled');
				tr_tag.find('input.oms_notify').removeAttr('disabled');
			}
		}
		
		function disableEditing(tr_tag)
		{
			tr_tag.find('.for_editing').hide();
			tr_tag.find('.for_view').show();
			if(tr_tag)
			{
				tr_tag.find('.reset').hide();
				tr_tag.find('.edit').show();
				
				tr_tag.find('.save').addClass('disabled');
				tr_tag.find('.save').addClass('disabled');
				tr_tag.find('input.oms_notify').attr('disabled', 'disabled');
			}
		}
		
		function saveStatus(status_tr_tag){
			var status_data = status_tr_tag.find('input').serialize() + "&" + status_tr_tag.find('textarea').serialize();
			var oms_notify = status_tr_tag.find('input.oms_notify').attr('checked');
			console.log(oms_notify);
			if(oms_notify == 'checked')
				status_data += "&enable_notification=1";
			console.log(status_data);	
			var url = base_url + '/ordertracking/updatestatus';
			$.get(url, status_data, function(respone){
				console.log(respone);
				if(respone.err != 0)
					return;
				
				if(respone.display_status_id)
				{
					var status_id_td_tag = status_tr_tag.find('td.status_id');
					console.log(status_id_td_tag.find('input.status_id'));
					console.log(respone.display_status_id);
					status_id_td_tag.find('#input_status_id').val(respone.display_status_id);
					status_id_td_tag.find('#span_status_id').text(respone.display_status_id);
				}
				
				var status_text_td_tag = status_tr_tag.find('td.status_text');
				var status_text = status_text_td_tag.find('.for_editing input').val();;
				status_text_td_tag.find('.for_view').text(status_text);
				
				var oms_status_td_tag = status_tr_tag.find('td.oms_status');
				var oms_status = oms_status_td_tag.find('.for_editing input').val();;
				oms_status_td_tag.find('.for_view').text(oms_status);
				
				var oms_email_template_td_tag = status_tr_tag.find('td.oms_email_template');
				var oms_email_template = oms_email_template_td_tag.find('.for_editing textarea').val();
				oms_email_template_td_tag.find('.for_view').html(oms_email_template);
				
			},'json');
			//console.log(status_data);
		}
		
		function deleteStatus(status_tr_tag){
			var data = {};
			var url = base_url + '/ordertracking/deletestatus';
			status_tr_tag.hide('fast');	
			data.display_status_id = status_tr_tag.find("input.status_id").val();
			if(data.display_status_id == '')
				return;
			$.get(url, data, function(respone){
				status_tr_tag.remove();				
			});			
		}
		
		 function createDisplayStatus()
		 {
			var display_status_tpl = $("#display_status_tpl").children("tbody").children('tr').clone();
			//display_status_tpl.hide();
			enableEditing(display_status_tpl);
			$("#first_row").after(display_status_tpl);
			//display_status_tpl.show('fast');
		 }
		
	});
		
    {/literal}
</script>